This PR adds support for specifying a box shadow color using a composable API:

<div class="shadow-xl shadow-blue-500/20">

The motivation for this is to make it possible to tint your shadows to look better on colored backgrounds, which is a design principle that @joshwcomeau outlines beautifully in this blog post:

https://www.joshwcomeau.com/css/designing-shadows/

Here you can see the default black-based shadow on the left, and a tinted shadow on the right:

The difference is kind of subtle but the tinted ones look more natural when you get the values right.

The composable API is very flexible (almost too flexible really), so this is sort of an advanced feature that non-designers might not have an easy time getting great results with. I hope to provide some guidance around how to approach using these APIs in the documentation for v3 when it's released.

Under the hood, all colors in a shadow are replaced by the color you specify. For example, given this shadow in your config:

boxShadow: {
  // ...
  fancy: '0 1px 3px rgba(24, 53, 76, 0.11), 0 2px 9px rgba(11, 22, 99, 0.42)'
}

...if you write the following HTML:

<div class="shadow-fancy shadow-blue-500">

...the final rendered box shadow will be this:

box-shadow: 0 1px 3px #3B82F6, 0 2px 9px #3B82F6

Notice that even though in the original shadow the two separate shadow layers had separate colors, in the final shadow both layers are the exact same color. This is the only practical approach I felt was reasonable after attempting to approach this feature from scratch like 12 times.

This is a little weird because the default Tailwind shadow use different alpha values for the shadow layers. For this reason, this PR also tweaks the default shadows to use the same alpha value for each layer. By doing this, when you specify a shadow color the colored shadow will have the same transparency and blending characteristics as the default shadow.

We've tried to make the new shadows as visually identical to the old ones as possible, which you can preview in this Play:

https://play.tailwindcss.com/S8d4uoZ2sz?layout=preview

It's also worth noting that if you change a shadow at a different breakpoint, it will override any custom color.

<!-- This shadow will NOT be red at md screens and above -->
<div class="shadow-lg shadow-red-500 md:shadow-xl">

To preserve the color, it needs to be respecified:

<!-- This shadow WILL be red at md screens and above -->
<div class="shadow-lg shadow-red-500 md:shadow-xl md:shadow-red-500">

This is the only way we could make it possible to switch from a color back to the default shadow color at a different breakpoint. In the future we may come up with a terser syntax (like shadow-xl/red-500) to make this feel less annoying, but in practice I don't expect this to be a huge pain point anyways.

All of the colors are available as shadow colors by default, and if you need to customize them separately you can do so under the boxShadowColor key in your config.